<template>
  <div>
    <v-title></v-title>
    <v-search></v-search>
    <!-- banner -->
    <v-banner></v-banner>

    <!-- 布局 -->
    <!-- 首页商品切换 -->
    <div class="goods">
      <span>热门推荐</span>
      <span>上新推荐</span>
      <span>所有商品</span>
    </div>

    <!-- 商品列表展示，应该有三块 -->
    <ul class="goodsUl">
        <!-- 1.页面跳转方式一：路由导航 不能做逻辑,并传参-->
      <!-- <li v-for="item in goodsList" :key="item.id">
        <router-link :to="'/detail/'+item.id" >
          <img :src="item.img" :alt="item.goodsName" />
        <div>
          <h3>{{ item.goodsName }}</h3>
          <span>现价格：￥{{ item.oldPrice }}</span>
          <del>原价格：￥{{ item.newPrice }}</del>
          <button>立即抢购</button>
        </div>
        </router-link>
      </li> -->


 

      <!-- 2.编程式导航：通过函数，能做逻辑 -->
      <li v-for="item in goodsList" :key="item.id" @click="getDetail(item.id)">
          <img :src="item.img" :alt="item.goodsName" />
        <div>
          <h3>{{ item.goodsName }}</h3>
          <span>现价格：￥{{ item.oldPrice|toFixed(2)}}</span>
          <del>原价格：￥{{ item.newPrice|toFixed(3)}}</del>
          <button>立即抢购</button>
        </div>
      </li>
    </ul>
  </div>
</template>
  
  <script>
import toFixed from "@/filters/toFixed";
import vBanner from "../components/vBanner.vue";
export default {
  components: {
    vBanner
  },
  data() {
    return {
      goodsList: [
        {
          id: 1,
          img:
            "https://img13.360buyimg.com/seckillcms/s140x140_jfs/t1/222039/22/15787/47580/6284a4a8E147848f7/18779175a6e7816c.jpg.webp",
          goodsName: "啄木鸟",
          oldPrice: 234,
          newPrice: 245
        },
        {
          id: 2,
          img:
            "https://img14.360buyimg.com/seckillcms/s140x140_jfs/t1/195626/40/5819/203946/60b58249E4d824b8e/3ee77fa965db8ac8.jpg.webp",
          goodsName: "茶具",
          oldPrice: 340,
          newPrice: 234
        },
        {
          id: 3,
          img:
            "https://img20.360buyimg.com/seckillcms/s140x140_jfs/t1/26164/16/16181/41294/62848892E2cc41706/d1afca1d357e6e92.jpg.webp",
          goodsName: "串珠",
          oldPrice: 12,
          newPrice: 1200
        },
        {
          id: 4,
          img:
            "https://img13.360buyimg.com/seckillcms/s140x140_jfs/t1/59348/7/18088/100190/6285f1a9Eaa0f571e/41e4c86ec2e53998.jpg.webp",
          goodsName: "轻奢",
          oldPrice: 8,
          newPrice: 19
        }
      ]
    };
  },
  methods:{
    getDetail(id){
      //获取到路由对象，上面很多方法，可以进行路由的跳转相关操作
      console.log(this.$router);
      //编程式导航跳转,跳转到detail页面
      this.$router.push("/detail/"+id);
  
    }
  }
};
</script>
  
  <style scoped>
.box {
  height: 2.5rem;
}

.goods {
  height: 0.8rem;
  display: flex;
}
.goods span {
  flex: 1;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.25rem;
}

.goodsUl {
  width: 96%;
  margin: 0 auto;
  margin-bottom: 1rem;
}
.goodsUl a,.goodsUl li {
  border: 1px solid #ccc;
  padding: 10px;
  display: flex;
  margin-bottom: 0.16rem;
}
.goodsUl li img {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.goodsUl li div {
  flex: 1;
  margin-left: 0.2rem;
}
.goodsUl li div h3 {
  font-size: 0.34rem;
  font-weight: bold;
  margin-bottom: 0.2rem;
}
.goodsUl li div span,
.goodsUl li div del {
  font-size: 0.24rem;
  display: block;
  margin-bottom: 0.16rem;
}
.goodsUl li div span {
  color: red;
}
.goodsUl li div del {
  color: #ccc;
}
</style>